<template>
<!--高级用法-->
  <!-- <Vfors></Vfors> -->
  <!-- <Vforanli></Vforanli> -->
  <!-- <Vforg></Vforg> -->
  <!-- <Vfor></Vfor> -->
  <!-- <Vifshow></Vifshow> -->
  <!--v-model指令-->
  <!-- <Vmodel></Vmodel> -->
  <!--案例-->
  <!-- <fanzanli></fanzanli>  -->
  <!-- <Von>
    </Von> -->

    <!--引入组件，使用组件-->
    <!-- <Vbind></Vbind><br> -->
    <!--模板语法 -文本插值表达式 只是纯文本格式-->
    <!-- <h3>我的count值为：{{ count+1 }}</h3>
  <h3>我是否成年：{{ age>=18 ? "成年了":"未成年" }}</h3>
  <h4 style="font-size: 18px;">是否包含html标签：{{ msg }}</h4> -->
    <!--v-html指令 用来解决包含html标签的-->
    <!-- <h4 v-html="msg"></h4>
  <button @click="onCount">点击++</button> -->

</template>
<!--组合式api 包含setup函数的-->
<script setup>
//响应式数据 如果不需要在页面DOM中动态展示的话 不需要使用ref包裹
import { ref } from 'vue';
//引入外部组件
import Vbind from './components/Vbind.vue';
import Von from './components/Von.vue';
import fanzanli from './components/fanzanli.vue';
import Vmodel from './components/Vmodel.vue';
import Vifshow from './components/Vifshow.vue';
import Vfor from './components/Vfor.vue';
import Vforg from './components/Vforg.vue';
import Vforanli from './components/Vforanli.vue';
import Vfors from './components/vfors.vue';

const age = ref(17)
let count = ref(0)
const msg = ref("我的后台数据: <h4 style='color:red;font-size:18px'>哈哈哈</h4>")



// 函数 方法
const onCount = () => { 
  count++
}
// js 原始函数
// function onCount() { 
//   console.log("点击了测试函数");
  
// }
</script>
<!--选项式api-->
<!-- <script>
export default{ 
  data(){
    return {
      //自带响应式数据，不需要手动声明ref
      count: 0
    }
  },
  methods: {
    onCount() { 
      this.count++
    }
  }
}

</script> -->
<style scoped>

</style>
